<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水果卡片分类游戏</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            width: 100%;
            max-width: 1000px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #2c3e50;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .instructions {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 15px;
            margin-bottom: 20px;
            line-height: 1.6;
            border-left: 4px solid #3498db;
        }
        
        .game-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-items: center;
            min-height: 200px;
            background: rgba(52, 152, 219, 0.1);
            border-radius: 15px;
            padding: 15px;
        }
        
        .categories-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            background: rgba(46, 204, 113, 0.1);
            border-radius: 15px;
            padding: 15px;
        }
        
        .category {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            padding: 15px;
            text-align: center;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .category-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #2c3e50;
            font-weight: bold;
        }
        
        .category-dropzone {
            width: 100%;
            min-height: 80px;
            border: 2px dashed #3498db;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
            padding: 5px;
            transition: all 0.3s;
        }
        
        .category-dropzone.highlight {
            background: rgba(52, 152, 219, 0.2);
            border: 2px solid #3498db;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        button {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        .shape-btn {
            background: linear-gradient(to right, #e74c3c, #c0392b);
        }
        
        .fruit-btn {
            background: linear-gradient(to right, #2ecc71, #27ae60);
        }
        
        .reset-btn {
            background: linear-gradient(to right, #9b59b6, #8e44ad);
        }
        
        .score-board {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 20px;
            background: rgba(52, 152, 219, 0.2);
            padding: 15px;
            border-radius: 15px;
        }
        
        .score-item {
            text-align: center;
        }
        
        .score-value {
            font-size: 2rem;
            font-weight: bold;
            color: #2c3e50;
        }
        
        /* 卡片样式 */
        .card {
            width: 80px;
            height: 100px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: grab;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background: white;
            position: relative;
            overflow: hidden;
        }
        
        .card:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }
        
        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: #3498db;
        }
        
        .card-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
        }
        
        .fruit-emoji {
            font-size: 2rem;
            margin-bottom: 5px;
        }
        
        .card-title {
            font-size: 0.8rem;
            text-align: center;
            font-weight: bold;
        }
        
        /* 形状样式 */
        .triangle {
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        
        .circle {
            border-radius: 50%;
        }
        
        .square {
            border-radius: 10px;
        }
        
        /* 动画效果 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .correct {
            animation: pulse 1s;
            border: 2px solid #2ecc71;
        }
        
        .incorrect {
            animation: shake 0.5s;
            border: 2px solid #e74c3c;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .game-area {
                grid-template-columns: 1fr;
            }
            
            .controls {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>水果卡片分类游戏</h1>
            <p>按照形状或水果种类对卡片进行分类，测试你的分类技能！</p>
        </header>
        
        <div class="instructions">
            <h3>游戏说明：</h3>
            <p>1. 您可以选择先按形状分类或先按水果种类分类</p>
            <p>2. 点击"按形状分"按钮，将卡片按形状（三角形、圆形、正方形）分类</p>
            <p>3. 点击"按水果种类分"按钮，将卡片按水果（苹果、梨、桃子）分类</p>
            <p>4. 完成一种分类后，可以继续进行另一种分类</p>
            <p>5. 正确分类获得分数，错误分类会扣分</p>
        </div>
        
        <div class="score-board">
            <div class="score-item">
                <div>分数</div>
                <div class="score-value" id="score">0</div>
            </div>
            <div class="score-item">
                <div>已分类</div>
                <div class="score-value" id="classified">0/15</div>
            </div>
        </div>
        
        <div class="game-area">
            <div class="cards-container" id="cards-container">
                <!-- 卡片将通过JS动态生成 -->
            </div>
            
            <div class="categories-container" id="categories-container">
                <!-- 分类区域将通过JS动态生成 -->
            </div>
        </div>
        
        <div class="controls">
            <button id="shape-btn" class="shape-btn">按形状分</button>
            <button id="fruit-btn" class="fruit-btn">按水果种类分</button>
            <button id="reset-btn" class="reset-btn">重新开始</button>
        </div>
    </div>

    <script>
        // 游戏状态变量
        let score = 0;
        let classifiedCount = 0;
        let currentMode = null; // 'shape' 或 'fruit'
        
        // DOM 元素
        const cardsContainer = document.getElementById('cards-container');
        const categoriesContainer = document.getElementById('categories-container');
        const scoreDisplay = document.getElementById('score');
        const classifiedDisplay = document.getElementById('classified');
        const shapeBtn = document.getElementById('shape-btn');
        const fruitBtn = document.getElementById('fruit-btn');
        const resetBtn = document.getElementById('reset-btn');
        
        // 卡片数据
        const cards = [
            // 三角形卡片 (4张)
            { id: 1, shape: 'triangle', fruit: 'peach' },
            { id: 2, shape: 'triangle', fruit: 'pear' },
            { id: 3, shape: 'triangle', fruit: 'pear' },
            { id: 4, shape: 'triangle', fruit: 'apple' },
            
            // 圆形卡片 (6张)
            { id: 5, shape: 'circle', fruit: 'apple' },
            { id: 6, shape: 'circle', fruit: 'apple' },
            { id: 7, shape: 'circle', fruit: 'apple' },
            { id: 8, shape: 'circle', fruit: 'peach' },
            { id: 9, shape: 'circle', fruit: 'peach' },
            { id: 10, shape: 'circle', fruit: 'pear' },
            
            // 正方形卡片 (5张)
            { id: 11, shape: 'square', fruit: 'peach' },
            { id: 12, shape: 'square', fruit: 'peach' },
            { id: 13, shape: 'square', fruit: 'apple' },
            { id: 14, shape: 'square', fruit: 'pear' },
            { id: 15, shape: 'square', fruit: 'pear' }
        ];
        
        // 分类类别
        const shapeCategories = ['triangle', 'circle', 'square'];
        const fruitCategories = ['apple', 'pear', 'peach'];
        
        // 初始化游戏
        function initGame() {
            generateCards();
            setupEventListeners();
        }
        
        // 生成卡片
        function generateCards() {
            cardsContainer.innerHTML = '';
            
            // 随机排序卡片
            const shuffledCards = [...cards].sort(() => Math.random() - 0.5);
            
            shuffledCards.forEach(card => {
                const cardEl = createCardElement(card);
                cardsContainer.appendChild(cardEl);
            });
        }
        
        // 创建卡片元素
        function createCardElement(card) {
            const cardEl = document.createElement('div');
            cardEl.className = `card ${card.shape}`;
            cardEl.draggable = true;
            cardEl.dataset.id = card.id;
            cardEl.dataset.shape = card.shape;
            cardEl.dataset.fruit = card.fruit;
            
            const content = document.createElement('div');
            content.className = 'card-content';
            
            const emoji = document.createElement('div');
            emoji.className = 'fruit-emoji';
            emoji.textContent = getFruitEmoji(card.fruit);
            
            const title = document.createElement('div');
            title.className = 'card-title';
            title.textContent = `${getShapeName(card.shape)} ${getFruitName(card.fruit)}`;
            
            content.appendChild(emoji);
            content.appendChild(title);
            cardEl.appendChild(content);
            
            return cardEl;
        }
        
        // 获取水果表情
        function getFruitEmoji(fruit) {
            const emojis = {
                'apple': '🍎',
                'pear': '🍐',
                'peach': '🍑'
            };
            return emojis[fruit] || '❓';
        }
        
        // 获取形状名称
        function getShapeName(shape) {
            const names = {
                'triangle': '三角形',
                'circle': '圆形',
                'square': '正方形'
            };
            return names[shape] || shape;
        }
        
        // 获取水果名称
        function getFruitName(fruit) {
            const names = {
                'apple': '苹果',
                'pear': '梨',
                'peach': '桃子'
            };
            return names[fruit] || fruit;
        }
        
        // 生成分类区域
        function generateCategories(mode) {
            categoriesContainer.innerHTML = '';
            currentMode = mode;
            
            let categoriesToUse;
            if (mode === 'shape') {
                categoriesToUse = shapeCategories;
            } else {
                categoriesToUse = fruitCategories;
            }
            
            categoriesToUse.forEach(category => {
                const categoryEl = document.createElement('div');
                categoryEl.className = 'category';
                
                const title = document.createElement('div');
                title.className = 'category-title';
                
                if (mode === 'shape') {
                    title.textContent = getShapeName(category);
                } else {
                    title.textContent = getFruitName(category);
                }
                
                const dropzone = document.createElement('div');
                dropzone.className = 'category-dropzone';
                dropzone.dataset.category = category;
                dropzone.dataset.mode = mode;
                
                // 添加正确数量提示
                const countHint = document.createElement('div');
                countHint.className = 'count-hint';
                countHint.style.fontSize = '0.8rem';
                countHint.style.marginTop = '5px';
                countHint.style.color = '#7f8c8d';
                
                if (mode === 'shape') {
                    // 形状分类的正确数量
                    const correctCount = {
                        'triangle': 4,
                        'circle': 6,
                        'square': 5
                    }[category];
                    countHint.textContent = `正确数量: ${correctCount}`;
                } else {
                    // 水果分类的正确数量
                    const correctCount = {
                        'apple': 6, // 苹果总数
                        'pear': 5,  // 梨总数
                        'peach': 4  // 桃子总数
                    }[category];
                    countHint.textContent = `正确数量: ${correctCount}`;
                }
                
                categoryEl.appendChild(title);
                categoryEl.appendChild(dropzone);
                categoryEl.appendChild(countHint);
                categoriesContainer.appendChild(categoryEl);
            });
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 拖拽事件
            document.addEventListener('dragstart', function(e) {
                if (e.target.classList.contains('card')) {
                    e.dataTransfer.setData('text/plain', e.target.dataset.id);
                    setTimeout(() => {
                        e.target.style.opacity = '0.5';
                    }, 0);
                }
            });
            
            document.addEventListener('dragend', function(e) {
                if (e.target.classList.contains('card')) {
                    e.target.style.opacity = '1';
                }
            });
            
            // 放置事件
            document.addEventListener('dragover', function(e) {
                if (e.target.classList.contains('category-dropzone')) {
                    e.preventDefault();
                    e.target.classList.add('highlight');
                }
            });
            
            document.addEventListener('dragleave', function(e) {
                if (e.target.classList.contains('category-dropzone')) {
                    e.target.classList.remove('highlight');
                }
            });
            
            document.addEventListener('drop', function(e) {
                if (e.target.classList.contains('category-dropzone')) {
                    e.preventDefault();
                    e.target.classList.remove('highlight');
                    
                    const cardId = e.dataTransfer.getData('text/plain');
                    const draggedCard = document.querySelector(`.card[data-id="${cardId}"]`);
                    
                    if (draggedCard) {
                        // 检查分类是否正确
                        const category = e.target.dataset.category;
                        const mode = e.target.dataset.mode;
                        let isCorrect = false;
                        
                        if (mode === 'shape') {
                            isCorrect = draggedCard.dataset.shape === category;
                        } else {
                            isCorrect = draggedCard.dataset.fruit === category;
                        }
                        
                        if (isCorrect) {
                            // 正确分类
                            e.target.appendChild(draggedCard);
                            draggedCard.classList.add('correct');
                            setTimeout(() => draggedCard.classList.remove('correct'), 1000);
                            
                            score += 10;
                            classifiedCount++;
                            
                            scoreDisplay.textContent = score;
                            classifiedDisplay.textContent = `${classifiedCount}/15`;
                            
                            // 检查是否所有卡片都已分类
                            checkGameCompletion();
                        } else {
                            // 错误分类
                            draggedCard.classList.add('incorrect');
                            setTimeout(() => draggedCard.classList.remove('incorrect'), 1000);
                            
                            score = Math.max(0, score - 5);
                            scoreDisplay.textContent = score;
                        }
                    }
                }
            });
            
            // 按钮事件
            shapeBtn.addEventListener('click', function() {
                generateCategories('shape');
                shapeBtn.disabled = true;
                fruitBtn.disabled = false;
            });
            
            fruitBtn.addEventListener('click', function() {
                generateCategories('fruit');
                fruitBtn.disabled = true;
                shapeBtn.disabled = false;
            });
            
            resetBtn.addEventListener('click', resetGame);
        }
        
        // 检查游戏是否完成
        function checkGameCompletion() {
            if (classifiedCount === 15) {
                setTimeout(() => {
                    alert(`恭喜！你完成了游戏！最终得分: ${score}`);
                    resetGame();
                }, 1000);
            }
        }
        
        // 重置游戏
        function resetGame() {
            score = 0;
            classifiedCount = 0;
            
            scoreDisplay.textContent = score;
            classifiedDisplay.textContent = '0/15';
            
            shapeBtn.disabled = false;
            fruitBtn.disabled = false;
            
            categoriesContainer.innerHTML = '';
            generateCards();
        }
        
        // 初始化游戏
        initGame();
    </script>
</body>
</html>